<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=“viewport” content=“width=device-width, initial-scale=1” />
    <title>谷歌浏览器版手写签字演示</title>
    <link href="css/signDevice.css" rel="stylesheet">
</head>
<body>
<div id="orderInfo">
    <h2 style="text-align: center">谷歌浏览器版手写签字演示</h2>
    <span>货号：<span id="orderId"></span></span>预览确认无误后再签字
    <span style="position: absolute; right:0px;">日期：<span id="orderDate"></span></span>
    <div id="tables" class="tables"></div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/web_socket.js"></script>
<script th:inline="javascript">
	function fresh(){
		if(location.href.indexOf("?reload=true")<0){
			location.href+="?reload=true";
		}
	}
	setTimeout("fresh()",500);
    drawTable();
    function drawTable(){
        var orderList = [{"id":1,"orderId":"test","orderState":1,"orderDate":"20180628","goodsName":"冰箱","goodsNum":10,"payMoney":10000.00},{"id":2,"orderId":"BS0001","orderState":1,"orderDate":"20180629","goodsName":"沙发+床","goodsNum":50,"payMoney":15000.00},{"id":3,"orderId":"BT0002","orderState":1,"orderDate":"20180703","goodsName":"木材板料","goodsNum":100,"payMoney":800.00},{"id":4,"orderId":"BT0003","orderState":1,"orderDate":"20180704","goodsName":"热带水果芒果","goodsNum":60,"payMoney":989.01},{"id":2,"orderId":"BS0001","orderState":1,"orderDate":"20180629","goodsName":"沙发+床","goodsNum":50,"payMoney":15000.00},{"id":3,"orderId":"BT0002","orderState":1,"orderDate":"20180703","goodsName":"木材板料","goodsNum":100,"payMoney":800.00},{"id":4,"orderId":"BT0003","orderState":1,"orderDate":"20180704","goodsName":"热带水果芒果","goodsNum":60,"payMoney":989.01},{"id":2,"orderId":"BS0001","orderState":1,"orderDate":"20180629","goodsName":"沙发+床","goodsNum":50,"payMoney":15000.00},{"id":3,"orderId":"BT0002","orderState":1,"orderDate":"20180703","goodsName":"木材板料","goodsNum":100,"payMoney":800.00},{"id":4,"orderId":"BT0003","orderState":1,"orderDate":"20180704","goodsName":"热带水果芒果","goodsNum":60,"payMoney":989.01},{"id":2,"orderId":"BS0001","orderState":1,"orderDate":"20180629","goodsName":"沙发+床","goodsNum":50,"payMoney":15000.00},{"id":3,"orderId":"BT0002","orderState":1,"orderDate":"20180703","goodsName":"木材板料","goodsNum":100,"payMoney":800.00},{"id":4,"orderId":"BT0003","orderState":1,"orderDate":"20180704","goodsName":"热带水果芒果","goodsNum":60,"payMoney":989.01}];
        $("#orderId").text(orderList[1].orderId);
        $("#orderDate").text(orderList[1].orderDate);
        // 动态写表
        var html = '<table border="1" id="tableId" style="border-collapse: collapse;border-color: #eaebec;border-width: 1px; width: 100%;"><tbody>';

        for(var i=0;i<orderList.length;i++){
			var ds="";
			var nn=i%2;
			if(nn!=0)
			{
				ds="tdc1";
			}
			
            html+="<tr class='"+ds+"'><td>货物名称</td>";
            html += "<td>"+orderList[i].goodsName+"</td><td>件数</td>";
            html += "<td>" + orderList[i].goodsNum + "</td><td>代收货款</td>";
            html += "<td  colspan='3'>" + orderList[i].payMoney + "</td></tr>";
        }
        html += '<tr><td rowspan="4">托运须知</td>';
        html += '<td rowspan="4" colspan="4"><li>1.&nbsp;注明收货地址</li><li>2.&nbsp;标清收货人姓名和电话</li><li>3.&nbsp;托运有风险，建议保价运输</li></td>';
        html += '<tr><td  rowspan="1" colspan="3">收货客户签字</td></tr>';
        html += '<tr><td rowspan="3" colspan="3">';
        html += '<img id="signImg" style="width: 100%;"></img>';
        html += '</td></tr></tr></tbody></table><div id="tables" style="height:30px;"></div>';
        $("#tables").html(html);
        webSocket();
    };
	
	var map = new Map();
    // 建立webSocket连接
    function webSocket() {
		window.WEB_SOCKET_SWF_LOCATION = "WebSocketMain.swf";
		WEB_SOCKET_DEBUG = true;
        if("WebSocket" in window){
			websocket = new WebSocket("ws://127.0.0.1:8802");
        }else{
            alert("浏览器不支持");
        }
        //连接成功建立的回调方法
        websocket.onopen = function(event){
			console.log("连接建立成功");
        };
        //接收到消息的回调方法
        websocket.onmessage = function(event){
            var obj = JSON.parse(event.data);
			if("SignBase64" == obj.typeName){
				
				map.set(obj.message.NO,obj.message.Content);
				
				if(map.elements.length == obj.message.Count){
					var signImgBase64 = "";
					for(var i=1;i<=map.elements.length;i++){
						signImgBase64 += map.get(i);
					}
					$("#signImg").attr('height','auto');
					$("#signImg").attr('src','data:image/png;base64,'+signImgBase64);
					
					map = new Map();
				}
			}else if("NextPage"== obj.typeName){
				$("#tables").scrollTop($("#tables").scrollTop() + 100);
			}else if("PrePage" == obj.typeName){
				$("#tables").scrollTop($("#tables").scrollTop() - 100);
			}
        };

        //连接关闭的回调方法
        websocket.onclose = function(){

        };
    };
</script>
</html>